<!DOCTYPE html>
<html lang="en">





<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/zezhang/img/favicon.webp">
  <link rel="icon" type="image/png" href="/zezhang/img/favicon.webp">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="description" content="">
  <meta name="author" content="ZeZhang">
  <meta name="keywords" content="">
  <title>你那里天气还好吗?</title>

  <link  rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_yg9cfy8wd6.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_pjno9b9zyxs.css">


<link  rel="stylesheet" href="/zezhang/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script  src="/zezhang/js/utils.js" ></script>
<meta name="generator" content="Hexo 4.2.0"></head>


<body>
  <header style="height: 100vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/zezhang/">&nbsp;<strong>你那里天气还好吗?</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/zezhang/">
                <i class="iconfont icon-home-fill"></i>
                Home
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/zezhang/archives/">
                <i class="iconfont icon-archive-fill"></i>
                Archives
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/zezhang/tags/">
                <i class="iconfont icon-tags-fill"></i>
                Tags
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/zezhang/about/">
                <i class="iconfont icon-user-fill"></i>
                About
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="view intro-2" id="background" parallax=true
         style="background: url('/zezhang/img/banner8.webp') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="container text-center white-text fadeInUp">
            <span class="h2" id="subtitle">
              
            </span>

            
          </div>

          
            <div class="scroll-down-bar">
              <i class="iconfont icon-arrowdown"></i>
            </div>
          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      <div class="container nopadding-md">
        <div class="py-5" id="board"
          style=margin-top:0>
          
          <div class="container">
            <div class="row">
              <div class="col-12 col-md-10 m-auto">
                


  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/03/15/Vue%E5%B8%B8%E8%A7%81%E7%9A%84%E7%81%B5%E9%AD%82%E6%8B%B7%E9%97%AE/" target="_self">
          <img src="/zezhang/img/vue.webp" srcset="/zezhang/img/loading.gif" alt="Vue常见的灵魂拷问">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/03/15/Vue%E5%B8%B8%E8%A7%81%E7%9A%84%E7%81%B5%E9%AD%82%E6%8B%B7%E9%97%AE/">Vue常见的灵魂拷问</a>

      <a href="/zezhang/2020/03/15/Vue%E5%B8%B8%E8%A7%81%E7%9A%84%E7%81%B5%E9%AD%82%E6%8B%B7%E9%97%AE/" class="index-excerpt">
        
        
          
        
        <div>1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA（ single-page application )仅在web页面初始化时加载相应的HTML,javascrip和css.一旦页面加载成功,SPA不会因为用户的操作而进行页面的重新加载或者跳转;取而代之的是利用路由机制实现HTML内容的变换,ui与用户的交互,避免页面的重新加载.
优点:

用户体验好,快,内容的改变不需要重新加载</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-03-15
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/vue/">vue</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/04/22/%E3%80%8C%E8%BD%AC%E8%BD%BD%E3%80%8DWebpack%E9%9D%A2%E8%AF%95%E9%A2%98/" target="_self">
          <img src="/zezhang/img/webpack.webp" srcset="/zezhang/img/loading.gif" alt="「转载」Webpack面试题">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/04/22/%E3%80%8C%E8%BD%AC%E8%BD%BD%E3%80%8DWebpack%E9%9D%A2%E8%AF%95%E9%A2%98/">「转载」Webpack面试题</a>

      <a href="/zezhang/2020/04/22/%E3%80%8C%E8%BD%AC%E8%BD%BD%E3%80%8DWebpack%E9%9D%A2%E8%AF%95%E9%A2%98/" class="index-excerpt">
        
        
          
        
        <div>0.有哪些常见的Loader？你用过哪些Loader？(我开始熟悉的报起了菜名)

raw-loader：加载文件原始内容（utf-8）

file-loader：把文件输出到一个文件夹中，在代码中通过相对 URL 去引用输出的文件 (处理图片和字体)

url-loader：与 file-loader 类似，区别是用户可以设置一个阈值，大于阈值时返回其 publicPath，小于阈值时返回文件 </div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-04-22
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/web%E5%89%8D%E7%AB%AF/">web前端</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/04/21/vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" target="_self">
          <img src="/zezhang/img/vue2.webp" srcset="/zezhang/img/loading.gif" alt="Vue基础知识">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/04/21/vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/">Vue基础知识</a>

      <a href="/zezhang/2020/04/21/vue%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86/" class="index-excerpt">
        
        
          
        
        <div>

Vue 的优缺点是什么优点：

低耦合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面，让很多 view 重用这段视图逻辑。
独立开发。开发人员可以专注于业务逻辑和数据</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-04-21
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/vue/">vue</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/03/14/seo%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E4%B9%8Bnuxt.js/" target="_self">
          <img src="/zezhang/img/nuxt.webp" srcset="/zezhang/img/loading.gif" alt="seo解决方案之nuxt">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/03/14/seo%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E4%B9%8Bnuxt.js/">seo解决方案之nuxt</a>

      <a href="/zezhang/2020/03/14/seo%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88%E4%B9%8Bnuxt.js/" class="index-excerpt">
        
        
          
        
        <div>seo汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。
nuxt服务端渲染与客户端渲染传统的web开发，传统的web开发是，客户端向服务端发送请求，服务端查询数据库，拼接HTML字符串（模板），通过一系列的数据处理之后，把整理好的HTML返回给客户端,浏览器相当于打开了一个页面。这种比如我们经常听说过的jsp,PH</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-03-14
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/vue/">vue</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/03/11/%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/" target="_self">
          <img src="/zezhang/img/es6.webp" srcset="/zezhang/img/loading.gif" alt="数组常用操作(含ES6)">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/03/11/%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/">数组常用操作(含ES6)</a>

      <a href="/zezhang/2020/03/11/%E6%95%B0%E7%BB%84%E5%B8%B8%E7%94%A8%E6%93%8D%E4%BD%9C/" class="index-excerpt">
        
        
          
        
        <div>

1.concat()concat()方法用于连接两个或者多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本
var arr1=[1,2,3];
var arr2=[4,5];
var arr3=arr1.concat(arr2)
console.log(arr1);//[1,2,3]
console.log(arr3);//[1,2,3,4,5]

2.join()join()方</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-03-11
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/JavaScript/">JavaScript</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/03/09/this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98/" target="_self">
          <img src="/zezhang/img/this.webp" srcset="/zezhang/img/loading.gif" alt="this指向问题">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/03/09/this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98/">this指向问题</a>

      <a href="/zezhang/2020/03/09/this%E6%8C%87%E5%90%91%E9%97%AE%E9%A2%98/" class="index-excerpt">
        
        
          
        
        <div>this的作用
this可以帮我们简化很多代码。比如xiaoming.name、xiaoming.age可以直接写成this.name、this.age。
特别是当我们不知道一个对象是什么，或者这个对象没有名字但又很想调用它的时候，就会使用到this对象。
</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-03-09
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/JavaScript/">JavaScript</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/02/01/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84N%E7%A7%8D%E5%8A%9E%E6%B3%95/" target="_self">
          <img src="/zezhang/img/css.webp" srcset="/zezhang/img/loading.gif" alt="垂直居中的N种办法">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/02/01/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84N%E7%A7%8D%E5%8A%9E%E6%B3%95/">垂直居中的N种办法</a>

      <a href="/zezhang/2020/02/01/%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84N%E7%A7%8D%E5%8A%9E%E6%B3%95/" class="index-excerpt">
        
        
          
        
        <div>如何让一个子元素在父容器里水平垂直居中？这个问题必考，在实战开发中，也应用得非常多。
你也许能顺手写出好几种实现方法。但大部分人的写法不够规范，经不起千锤百炼。换句话说：这些人也就面试的时候夸夸其谈，但真的上战场的时候，他们不敢这么写，也不知道怎么写最靠谱。
这篇文章中，我们来列出几种常见的写法，最终你会明白，哪种写法是最优雅的。
当然，我还会拿出实际应用中的真实场景来举例，让你感受一下标准垂直居</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-02-01
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/css/">css</a>
            
          </div>
        
      </div>
    </div>
  </div>

  <div class="row mx-auto index-card">
    
    
      <div class="col-12 col-md-4 m-auto index-img">
        <a href="/zezhang/2020/02/01/%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85/" target="_self">
          <img src="/zezhang/img/js.webp" srcset="/zezhang/img/loading.gif" alt="作用域和封包">
        </a>
      </div>
    
    <div class="col-12 col-md-8 mx-auto index-info">
      <a class="index-header" href="/zezhang/2020/02/01/%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85/">作用域和封包</a>

      <a href="/zezhang/2020/02/01/%E4%BD%9C%E7%94%A8%E5%9F%9F%E5%92%8C%E9%97%AD%E5%8C%85/" class="index-excerpt">
        
        
          
        
        <div>执行上下文执行上下文主要有两种情况：

全局代码： 一段&lt;script&gt;标签里，有一个全局的执行上下文。所做的事情是：变量定义、函数声明

函数代码：每个函数里有一个上下文。所做的事情是：变量定义、函数声明、this、arguments


PS：注意“函数声明”和“函数表达式”的区别。
全局执行上下文在执行全局代码前将window确定为全局执行上下文。
（1）对全局数据进行预处理：（</div>
      </a>

      <div class="index-btm post-metas">
        
          <div class="post-meta mr-3">
            <i class="iconfont icon-date"></i>&nbsp;2020-02-01
          </div>
        
        
        
          <div class="post-meta">
            <i class="iconfont icon-tags"></i>
            
              <a href="/zezhang/tags/JavaScript/">JavaScript</a>
            
          </div>
        
      </div>
    </div>
  </div>





              </div>
            </div>
          </div>
        </div>
      </div>
    
  </main>

  
    <a id="scroll-top-button" href="#" role="button">
      <i class="iconfont icon-arrowup" aria-hidden="true"></i>
    </a>
  

  
    <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">Search</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">keyword</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
  

  

  

  <footer class="mt-5">
  <div class="text-center py-3">
    <div>
      <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a>
      <i class="iconfont icon-love"></i>
      <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener">
        <span>Fluid</span></a>
    </div>
    
  <div class="statistics">
    
    

    
      
        <!-- 不蒜子统计PV -->
        <span id="busuanzi_container_site_pv" style="display: none">
            总访问量 
            <span id="busuanzi_value_site_pv"></span>
             次
          </span>
      
      
        <!-- 不蒜子统计UV -->
        <span id="busuanzi_container_site_uv" style="display: none">
            总访客数 
            <span id="busuanzi_value_site_uv"></span>
             人
          </span>
      
    
  </div>


    

    
  </div>
</footer>

<!-- SCRIPTS -->
<script  src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js" ></script>
<script  src="https://cdn.staticfile.org/twitter-bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script  src="/zezhang/js/debouncer.js" ></script>
<script  src="/zezhang/js/main.js" ></script>

<!-- Plugins -->


  
    <script  src="/zezhang/js/lazyload.js" ></script>
  



  <script defer src="https://cdn.staticfile.org/clipboard.js/2.0.6/clipboard.min.js" ></script>
  <script  src="/zezhang/js/clipboard-use.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>







  <script  src="https://cdn.staticfile.org/typed.js/2.0.11/typed.min.js" ></script>
  <script>
    var typed = new Typed('#subtitle', {
      strings: [
        '  ',
        "每天坚持写博客(0/1)&nbsp;",
      ],
      cursorChar: "_",
      typeSpeed: 70,
      loop: false,
    });
    typed.stop();
    $(document).ready(function () {
      $(".typed-cursor").addClass("h2");
      typed.start();
    });
  </script>





  <script  src="/zezhang/js/local-search.js" ></script>
  <script>
    var path = "/zezhang/local-search.xml";
    var inputArea = document.querySelector("#local-search-input");
    inputArea.onclick = function () {
      searchFunc(path, 'local-search-input', 'local-search-result');
      this.onclick = null
    }
  </script>






















</body>
</html>
